<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,div{
            margin: 0;
            padding: 0;
        }
        div {
            border: solid 0.2px grey;
        }
    </style>
</head>

<body>


    <div>

        <canvas id="tutorial" width="1200" height="960"></canvas>
    </div>

    <script>


        function getRandom(min, max) {

            return Math.random() * (max - min) + min


        }


        const canvas = document.getElementById("tutorial");
       
        // 获取视口尺寸（考虑滚动条）
        const viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
        const viewportHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
        
         
        
        // 应用尺寸到Canvas
        canvas.width = viewportWidth;
        canvas.height = viewportHeight;


        const ctx = canvas.getContext("2d");



        /**
         * 圆 
         * x y
         * r 半径
         * 
         */
        class Circle {
            constructor(x, y, r = 10) {
                this.x = x;
                this.y = y
                this.r = r;
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, true);
                ctx.fill();
                // if(this.x <  1900/2) {
                //     this.x = this.x-1
                // }else{
                //     this.x = this.x+1
                // }  
                // if(this.y <  960/2){
                //     this.y = this.y-1
                // }else{
                //     this.y = this.y+1
                // } 
                // 修改位置
                this.x = getRandom(0, viewportWidth)
                this.y = getRandom(0, viewportHeight)
            }
        }


        class Gra {
            constructor(startx, starty, r = 10, size = 20) {
                this.startx = startx;
                this.starty = starty;
                this.r = r;
                this.size = size;
                //数组
                this.circle = []

                //初始化图的信息
                this.init()
            }

            init() {

                for (let i = 0; i < this.size; i++) {
                    //     this.startx += 20;
                    //     this.starty += 20

                    //     this.circle.push(new Circle(this.startx,this.starty,this.r))
                    let rx = getRandom(0, viewportWidth)
                    let ry = getRandom(0, viewportHeight)
                    let rr = getRandom(2, 4)
                    this.circle.push(new Circle(rx, ry, rr))
                }
            }

            draw() {
                console.log(this.circle);

                setInterval(()=>{
                    ctx.clearRect(0,0,1900,1000);
                    this.circle.forEach(item => item.draw())
                },100)

            }



        }




        // let g = new Gra(200, 200, 3, 300);
        let g = new Gra(200, 200, 3, 1500);
        g.draw()





    </script>

</body>

</html>